<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            width: 100vw;
            /*100%视口宽高*/
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }

        /* 时钟整体 */
        main {
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;
        }

        /* 表盘 */
        #clock {
            width: 370px;
            height: 370px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            border-radius: 50%;
            box-shadow: inset 0 0 10px #fff;
            /*内阴影*/
        }

        /* 表盘上的时间数字 */
        main #clock .number {
            position: absolute;
            font-size: 50px;
            font-weight: 800;
            color: #fff;
        }

        /* 定位时间数字 */
        .number:first-child {
            top: 15px;
        }

        .number:nth-child(2) {
            right: 25px;
        }

        .number:nth-child(3) {
            bottom: 15px;
        }

        .number:nth-child(4) {
            left: 25px;
        }

        /* 数字短线 */
        main .lone {
            position: absolute;
            top: 1px;
            width: 6px;
            height: 30px;
            background-color: #fff;
            border-radius: 3px;
            /*改变旋转中心点*/
            transform-origin: center 200px;
        }

        /* 中心小圆圈 */
        main #circle {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #fff;
            box-shadow: 0 0 10px #fff;
            border-radius: 50%;
        }

        /* 时针 */
        main #hour {
            position: absolute;
            top: 115px;
            width: 12px;
            height: 86px;
            background-color: #fff;
            box-shadow: 0 0 5px #fff;
            border-radius: 7.5px;
            transform-origin: center 86px;
        }

        /* 分针 */
        main #min {
            position: absolute;
            top: 90px;
            width: 8px;
            height: 110px;
            background-color: #fff;
            box-shadow: 0 0 5px #fff;
            border-radius: 4px;
            transform-origin: center 110px;
        }

        /* 秒针 */
        main #sec {
            position: absolute;
            top: 75px;
            width: 3px;
            height: 125px;
            background-color: #fff;
            box-shadow: 0 0 5px #fff;
            border-radius: 1.5px;
            transform-origin: center 125px;
        }
    </style>
</head>

<body>
    <main>
        <div id="clock">
            <div class="number">12</div>
            <div class="number">3</div>
            <div class="number">6</div>
            <div class="number">9</div>
        </div>
        <div id="circle"></div>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
    </main>
</body>
<script>
    // 渲染时间短线
    let Oclock = document.querySelector('#clock');
    let rotateArr = [90, 180, 270];// 不需要的旋转角度
    for (let i = 1, rotate = 30; i < 9; i++, rotate += 30) {
        let Olone = document.createElement('div');
        Olone.className = 'lone';
        if (rotateArr.indexOf(rotate) != -1) {
            rotate += 30;
        }
        Olone.style.transform = `rotate(${rotate}deg)`;
        Oclock.appendChild(Olone);
    }

    //让指针动起来
    let Ohour = document.querySelector('#hour');
    let Omin = document.querySelector('#min');
    let Osec = document.querySelector('#sec');

    function move() {
        let d = new Date();
        let hour = d.getHours();//getHours()获取的时间范围是0-23
        if (hour > 11) { hour -= 12 };
        let min = d.getMinutes();
        let sec = d.getSeconds();
        //转动指针
        Ohour.style.transform = `rotate(${360 * (hour * 60 + min) / (12 * 60)}deg)`;
        Omin.style.transform = `rotate(${360 * min * 60 / 3600}deg)`;
        Osec.style.transform = `rotate(${360 * sec / 60}deg)`;
    }
    move();
    setInterval(move, 1000);
</script>

</html>